<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                componentName: "lk-input"
            }
        },
        template: `
          <div>
<!--            <lk-input v-show=" componentName === 'lk-input' "></lk-input>-->
<!--            <lk-button v-show=" componentName === 'lk-button' "></lk-button>-->

            <!-- 可以接收一个组件名称，这里动态的展示组件名称，
                在测试的时候发现，input 中的输入内容会被清空，并没有缓存下来-->
            <!-- <component :is="componentName"></component> -->

            <!-- 使用 keep-alive 可以缓存出输入框中的数据  -->
            <keep-alive>
                <component :is="componentName"></component>
            </keep-alive>

            <p>-------------------------------</p>
            <div>
              <button @click="change">切换</button>
            </div>
          </div>
        `,
        methods: {
            change(){
                if ( this.componentName === 'lk-button' ) {
                    this.componentName = 'lk-input';
                } else {
                    this.componentName = 'lk-button';
                }
            }
        }
    });

    // 注册组件
    app.component("lk-input", {
        template: `<input type="text" placeholder="输入框"/>`
    })

    app.component("lk-button", {
        template: `<button>按钮</button>`
    })

    app.mount("#app");
</script>
</html>
